<template>
    <div class="option-wrap">
        <div class="fungroup-option">
            <div class="fungroup-header">
                <div class="fungroup-title">
                    <span>条件选择</span>
                    <div class="back" @click="closeOption">
                        <i class="el-icon-close"></i>
                    </div>
                </div>
                <div class="header-line"></div>
                <div class="fungroup-btn">
                    <span
                        :class="{ 'active-span': optionTitle === '灰度值' }"
                        @click="changeTitle('灰度值')"
                    >
                        灰度值
                    </span>
                    <span
                        :class="{ 'active-span': optionTitle === '专题图' }"
                        @click="changeTitle('专题图')"
                    >
                        专题图
                    </span>
                </div>

                <div class="fungroup-btn">
                    <el-date-picker
                        v-model="choiceDate"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                        value-format="yyyy-MM-dd"
                    ></el-date-picker>
                </div>
                <div class="fungroup-btn" v-show="optionTitle === '灰度值'">
                    <div
                        v-for="(item, index) in bufferBtn.slice(0, 2)"
                        :key="index"
                        class="btn-wrap"
                    >
                        <img
                            @click="changeTools(index, item)"
                            class="fun-btn"
                            :src="
                                clickPng === index || mouseroverPng === index
                                    ? item.hoverUrl
                                    : item.imgUrl
                            "
                            @mouseover="overFun(0, index)"
                            @mouseout="overFun(1, index)"
                        />
                        <span class="tool-label">{{ item.label }}</span>
                    </div>
                </div>
                <div class="fungroup-btn" v-show="optionTitle === '专题图'">
                    <div v-for="(item, index) in bufferBtn.slice(1)" class="btn-wrap" :key="index">
                        <el-upload
                            v-if="item.toolTitle === 'buffer_upload'"
                            drag
                            class="fileChoice"
                            :auto-upload="false"
                            :show-file-list="false"
                            :on-change="uploadChange"
                            action=""
                        >
                            <img
                                type="file"
                                style="width:35px"
                                @click="clickPng = ''"
                                :src="
                                    clickPng === index || mouseroverPng === index
                                        ? item.hoverUrl
                                        : item.imgUrl
                                "
                                title="上传矢量文件"
                                alt
                                @mouseover="overFun(0, index)"
                                @mouseout="overFun(1, index)"
                            />
                            <span class="tool-label">{{ item.label }}</span>
                        </el-upload>
                        <img
                            v-if="item.toolTitle !== 'buffer_upload'"
                            @click="changeTools(index, item)"
                            class="fun-btn"
                            :src="
                                clickPng === index || mouseroverPng === index
                                    ? item.hoverUrl
                                    : item.imgUrl
                            "
                            @mouseover="overFun(0, index)"
                            @mouseout="overFun(1, index)"
                        />
                        <span class="tool-label">{{ item.label }}</span>
                    </div>
                </div>
                <div class="fungroup-btn" v-show="optionTitle === '专题图'">
                    <RegionPanel ref="regionPanel"></RegionPanel>
                </div>
                <div style="display:flex;justify-content:flex-end" class="fungroup-btn">
                    <el-button type="primary" @click="confirm">
                        确认
                    </el-button>
                </div>
            </div>
        </div>
        <ChoiceCharts ref="choiceCharts" v-show="chartsShow"></ChoiceCharts>
    </div>
</template>
<script>
import DrawFun from './draw_fun';
import ChoiceCharts from './choiceCharts';
import RegionPanel from './regionPanel';
import { getGrayAverage } from '../../service/getChartsData';
import dataCenterBus from 'U/dataCenterBus';
export default {
    name: 'optionPanel',
    components: {
        RegionPanel,
        ChoiceCharts,
    },
    data() {
        return {
            // drawFun: null,
            themeRange: null,
            drawType: '',
            chartsShow: false,
            charts: null,
            // position: null,
            choiceDate: '',
            clickPng: '',
            mouseroverPng: '',
            bufferBtn: [
                {
                    imgUrl: require('../listDis/theme/img/point0.png'),
                    hoverUrl: require('../listDis/theme/img/point1.png'),
                    toolTitle: 'point',
                    label: '点绘制',
                    fun_point: 'point_draw',
                },
                {
                    imgUrl: require('../listDis/theme/img/rectangular0.jpg'),
                    hoverUrl: require('../listDis/theme/img/rectangular1.jpg'),
                    toolTitle: 'rectangular',
                    label: '矩形绘制',
                    fun_rectangular: 'rectangular_draw',
                },
                {
                    imgUrl: require('../listDis/theme/img/area0.jpg'),
                    hoverUrl: require('../listDis/theme/img/area1.jpg'),
                    toolTitle: 'area',
                    label: '多边形绘制',
                    fun_area: 'area_draw',
                },
                {
                    imgUrl: require('../listDis/theme/img/upload0.jpg'),
                    hoverUrl: require('../listDis/theme/img/upload1.jpg'),
                    toolTitle: 'buffer_upload',
                    label: '矢量上传',
                    fun_upload: 'upload_draw',
                },
            ],
            optionTitle: '灰度值',
            xvalue: '',
            yvalue: '',
            pickerOptions: {
                // 校验时间范围，不能超过所选类型的时间
                disabledDate: time => {
                    let times = this.$parent.getTimes();
                    let date1 = times[0].replace(/-/g, '/');
                    let date2 = times[times.length - 1].replace(/-/g, '/');
                    return (
                        time.getTime() > new Date(date2).getTime() ||
                        time.getTime() < new Date(date1).getTime()
                    );
                },
            },
        };
    },
    mounted() {
        dataCenterBus.$on('isPhoneShowTj', val => {
            if (val) {
                if (this.$parent.nowChoice[0]) {
                    this.drawFun.drawPoint();
                }
            } else {
                this.chartsShow = false;
                this.drawFun.deleteArea(true);
            }
        });
        this.$nextTick(() => {
            this.drawFun = new DrawFun(this.drawCallBack, true);
        });
    },
    methods: {
        // 更改标题，清楚用户选择数据
        changeTitle(title) {
            this.optionTitle = title;
            this.clickPng = '';
            this.closeCharts(true);
        },
        // 点或面标注完毕进行处理
        drawCallBack(primitive, { points, xvalue, yvalue }, geo) {
            // 获取选择的区域的最大范围
            this.themeRange = points;
            this.xvalue = xvalue;
            this.yvalue = yvalue;
            this.position = geo;
            console.log(this.position);
            if (primitive) {
                this.drawType = primitive.getType() === 'Marker' ? 'point' : 'polygon';
            }
            if (this.$store.state.isPhone) {
                this.LAICharts();
            }
        },
        confirm() {
            if (this.optionTitle === '专题图') {
                this.openThematicMap();
            } else {
                this.addCharts();
            }
        },
        // 新打开标签页展示专题图
        async openThematicMap() {
            if (this.$parent.nowChoice[0] !== 'REF') {
                if (this.xvalue > 5 || this.yvalue > 5) {
                    this.$message.warning('所选范围过大，请重新选择！');
                    return;
                }
            }
            // 传入所需参数
            let routeUrl = this.$router.resolve({
                path: '/mapContent',
                query: {
                    startDate: this.choiceDate ? this.choiceDate[0] : '',
                    endDate: this.choiceDate ? this.choiceDate[1] : '',
                    nowChoice: this.$parent.nowChoice,
                    times: JSON.stringify(this.$parent.getTimes()),
                    currentIndex: this.$parent.$parent.currentIndex,
                },
            });
            window.open(routeUrl.href, '_blank');
        },
        // 移动端获取LAI图表数据
        async LAICharts() {
            let times = this.$parent.getTimes();
            let params = {
                geo: this.position,
                geoType: this.drawType,
                type: this.$parent.nowChoice[0] === 'REF' ? 'GFWFV' : this.$parent.nowChoice[0],
                startTime:
                    this.choiceDate && this.choiceDate.length > 0 ? this.choiceDate[0] : times[0],
                endTime:
                    this.choiceDate && this.choiceDate.length > 0
                        ? this.choiceDate[1]
                        : times[times.length - 1],
            };
            const resData = await getGrayAverage(params);
            if (resData.status === 200) {
                if (resData.data && resData.data.length <= 0) {
                    this.$message.warning('当前标注位置没有数据！');
                    this.chartsShow = false;
                    return;
                }
                this.$refs.choiceCharts.initCharts(resData.data);
                this.chartsShow = true;
            }
        },
        // 根据标绘位置获取图表数据
        async addCharts() {
            if (this.$parent.nowChoice[0] !== 'REF') {
                if (this.xvalue > 5 || this.yvalue > 5) {
                    this.$message.warning('所选范围过大，请重新选择！');
                    return;
                }
            }
            if (!this.drawType || this.optionTitle === '专题图') {
                return;
            }
            let times = this.$parent.getTimes();
            let params = {
                geo: this.position,
                geoType: this.drawType,
                type: this.$parent.nowChoice[0] === 'REF' ? 'GFWFV' : this.$parent.nowChoice[0],
                startTime:
                    this.choiceDate && this.choiceDate.length > 0 ? this.choiceDate[0] : times[0],
                endTime:
                    this.choiceDate && this.choiceDate.length > 0
                        ? this.choiceDate[1]
                        : times[times.length - 1],
            };
            const resData = await getGrayAverage(params);
            console.log(resData);
            if (resData.status === 200) {
                if (resData.data && resData.data.length <= 0) {
                    this.$message.warning('当前标注位置没有数据！');
                    this.chartsShow = false;
                    return;
                }
                this.$refs.choiceCharts.initCharts(resData.data);
                this.chartsShow = true;
            }
        },
        getType() {
            return this.$parent.nowChoice[0];
        },
        changeTools(index, item) {
            this[item['fun_' + item.toolTitle]]();
            this.clickPng = index;
        },
        // 地图工具图片悬浮
        overFun(numCode, index) {
            if (numCode === 0) {
                this.mouseroverPng = index;
            } else {
                this.mouseroverPng = null;
            }
        },
        uploadChange(file, fileList) {
            this.drawFun.parsingShape(file, fileList);
        },
        // 绘制点
        point_draw() {
            this.drawFun.drawPoint();
        },
        // 绘制多边形
        area_draw() {
            this.drawFun.drawArea();
        },
        // 绘制矩形
        rectangular_draw() {
            this.drawFun.drawExtent();
        },
        // 关闭条件面板
        closeOption() {
            this.$parent.optionShow = false;
            this.drawFun.deleteArea(true);
            this.drawType = '';
            this.clickPng = '';
            this.chartsShow = false;
        },
        // 关闭图标面板
        closeCharts(flag) {
            this.drawFun.deleteArea(flag);
            this.drawType = '';
            this.chartsShow = false;
        },
    },
};
</script>
<style lang="scss" scope>
@import 'theme/css/optionStyle.scss';
</style>
